<template>
  <el-tooltip v-bind="getParams">
    <slot></slot>
  </el-tooltip>
</template>
<script lang="ts" setup>
import type { Placement } from 'element-plus'

const defaultTooltipContent = ref('')

const props = withDefaults(
  defineProps<{
    content?: string //显示的内容
    placement?: Placement //Tooltip 组件出现的位置
    autoShow?: boolean //开启后，首次移入时，判断是否溢出，再动态决定是否提示
  }>(),
  {
    placement: 'top'
  }
)

const getParams = computed(() => {
  const { placement } = props
  return {
    placement,
    content: props.content ?? defaultTooltipContent.value
  }
})

const slots = useSlots()

// 自动获取提示内容
function autoGetTipContent() {
  // 如果传递了 content ，则不自动获取插槽内容
  if (typeof props.content === 'string') return

  const slotsContentTree = slots.default!()
  getContent(slotsContentTree)
  function getContent(arr: any[]) {
    const queue = [...arr] //创建队列
    while (queue.length > 0) {
      const item = queue.shift()
      if (typeof item?.children === 'string') {
        defaultTooltipContent.value += item.children
      } else if (Array.isArray(item?.children)) {
        queue.push(...item.children)
      }
    }
  }
}

onMounted(() => {
  // 没有插槽的情况
  if (!slots.default) {
    console.error('该组件需要有一个根节点作为默认插槽')
  }
  const slotsContentTree = slots.default!()

  // 插槽大于1个的情况
  if (slotsContentTree.length > 1) {
    console.error('该组件的默认插槽应该为一个根节点，且只能有一个根节点', {
      插槽内容: slotsContentTree,
      插槽根节点长度: slotsContentTree.length
    })
  }
  autoGetTipContent()
})
</script>
